<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item
      :title="it.name"
      :name="it.key"
      v-for="it in events"
      :key="it.key"
    >
      <CodeMirror v-model="code"></CodeMirror>
    </el-collapse-item>
  </el-collapse>
</template>
  <script>
import { events } from "./config";
import CodeMirror from "./code-mirror";
export default {
  data() {
    return {
      activeNames: ["click"],
      events,
      code: "function vm (vm) {return this}",
    };
  },
  components: {
    CodeMirror,
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
  },
  watch: {
    code: function (val) {
        let fun_str = val
      try {
        console.log(`output->this`,this)
        fun_str = fun_str.replace(/[\r\n]/g, "");
        let fun; //this is useful
        let func = "fun=" + fun_str;
        let result = eval(func)(this);
        return result;
      } catch (err) {
        // console.log(a, b);
        return true;
      }
    },
  },
};
</script>